<template>
	<div style="height: 60px;" class="top-u">
		<div class="asidetop">
			<p v-bind:class="{ 'logo':img , 'logo1':img1}">
				<img src="../../../static/img/logo.png" v-if="img">
				<img src="../../../static/img/1.png" v-else="">
				
			</p>
			<el-menu theme="dark" class="el-menu-demo btn" mode="horizontal">
				<i class="icon iconfont icon-liebiaoshitucaidan" @click="show()"></i>
			</el-menu>
		</div>
		<div class="my-info">
			<div class="ivu-avatar">
				<img v-if="(Imgurl) != 'null'" :src="host+Imgurl" class="imgs" />
				<img v-else="" src="../../assets/logo.png" class="imgs" />
			</div>
			<el-dropdown trigger="click">
				<span class="el-dropdown-link">
		      		<span class="uasename">{{usrname}}</span>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>
						<span @click="grsz()">个人设置</span>
					</el-dropdown-item>
					<el-dropdown-item>
						<span @click="cancel()">退出</span>
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<div class="tishi">
				<span class="pos"></span>
				<ul class="infolist" ref="main">
					<li>
						<div class="list-group">
							<a class="list-group-item1" @click="fnMsg(index)" v-for="(item,index) in datas" v-if="index<3">
								<div class="media-box">
									<div class="pull-left">
										<em class="el-icon-message"></em>
									</div>
									<div class="media-box-body clearfix">
										<p class="m0">{{item.Title}}</p>
										<p class="m0 text-muted subject">
											<small>{{item.Content}}</small>
										</p>
									</div>
								</div>
							</a>
							<a class="list-group-item1" @click="fnMsg(0)" v-if="datas.length>0">
								<small>更多消息</small>
								<span class="label label-danger pull-right">{{datas.length}}</span>
							</a>
							<a class="list-group-item1" v-else>
								<small>无</small>
							</a>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div v-show="isShow" class="sweet-overlay" tabindex="-1" style="display:block; opacity: 1.08;">
			<div class="model center-block">
				<div class="panel panel-default">
					<div class="panel-heading">
						<div class="panel-title">消息列表</div>
					</div>
					<div class="panel-body">
						<div class="msgL panel panel-default">
							<ul>
								<li v-bind:class="{active:index==qwer}" v-for="(item,index) in datas" :data-content="item.Content" @click="fnSelect($event,index)">{{item.Title}}</li>
							</ul>
						</div>
						<div class="msgR panel panel-default">
							<div class="title" id="title1">
							</div>
							<div class="con" id="con1">
							</div>
						</div>
					</div>
					<div class="panel-footer text-center">
						<el-button type="danger" @click="fnCancel()">关闭</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="sweet-overlay" v-if="mark5">
			<el-dialog title="个人信息设置" :visible.sync="mark5" size="tiny">
				<el-tabs v-model="activeName3" @tab-click="handleClick1">
					<el-tab-pane label="用户信息" name="first">
						<el-form ref="form" :model="form" label-width="80px" style="margin-top: 10px;">
							<el-form-item label="用户名">
								<el-input v-model="form.username" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="姓名">
								<el-input v-model="form.name"></el-input>
							</el-form-item>
							<el-form-item label="联系电话">
								<el-input v-model="form.tel"></el-input>
							</el-form-item>
							<el-upload style="text-align: center;" class="upload-demo" ref="upload1" :action="host1" :on-preview="handlePreview1" :on-remove="handleRemove1" :file-list="fileList1" :onError="uploadError1" limit="1" :onSuccess="uploadSuccess1" :auto-upload="false">
								<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
								<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload1">上传文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
							</el-upload>
							<span style="display: block; text-align: right; margin-top:20px;">
								<el-button @click="quxia()">取 消</el-button>
								<el-button type="primary" @click="updateuser()">确 定</el-button>
						    </span>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="密码修改" name="second">
						<el-form ref="form" :model="form" label-width="80px" style="margin-top: 10px;">
							<el-form-item label="旧密码">
								<el-input v-model="form.padd" type="password"></el-input>
							</el-form-item>
							<el-form-item label="新密码">
								<el-input v-model="form.pass" type="password"></el-input>
							</el-form-item>
							<el-form-item label="密码确认">
								<el-input v-model="form.pwd" type="password"></el-input>
							</el-form-item>

						</el-form>
						<span style="display: block; text-align: right; margin-top:20px;">
								<el-button @click="quxia()">取 消</el-button>
								<el-button type="primary" @click="mmcz()">确 定</el-button>
						</span>
					</el-tab-pane>
				</el-tabs>

			</el-dialog>
		</div>
	</div>
</template>

<script>
	import api from '../../kits/api.js';
	import emitt from './emit'
	export default {
		name: "topnav",
		data() {
			return {
				host:Host,
				activeName3: 'first',
				host1: "",
				fileList1: [], //上传头像
				form: {
					name: "",
					tel: "",
					username: "",
					pass: "",
					pwd: "",
					padd: ""
				},
				mark5: false,
				datas: [],
				isCollapse: false,
				img: true,
				img1: false,
				usrname: "",
				isShow: false,
				msgIndex: 0,
				qwer: '0',
//				shows: false,
				Imgurl: "",
				headerImg: "",
			};
		},
		created: function() {
			this.host1 = api.files
			this.usrname = localStorage.login
			this.Imgurl = localStorage.HeadImg
//			$(".infolist").css("display",none)
			
		},
		mounted: function() {
			//调用websocket 
			this.webSocket();
			$(".hello").click(function(){
				$(".infolist").hide();
			});
			$(".ivu-avatar").click(function(){
				$(".infolist").toggle();
				return false
			})
			$(".pos").click(function(){
				$(".infolist").toggle();
				return false
			})
			
		},
		methods: {
			handleClick1(tab, event) {
			},
			submitUpload1() {
				this.$refs.upload1.submit();
			},
			uploadSuccess1(response, file, fileList1) {
				this.$message({
					message: '上传成功',
					type: 'success'
				});
				this.headerImg = response.data.filePaht.substring(2, response.data.filePaht.length)
			},
			uploadError1(response, file, fileList1) {
				this.$message.error("上传失败，请重试");
			},
			handleRemove1(file, fileList1) {
			},
			handlePreview1(file) {
			},
			webSocket: function() {
				var me = this;
				if("WebSocket" in window) {
					var ws = new WebSocket(api.ws + localStorage.login + "/" + localStorage.token);
					ws.onmessage = function(evt) {
						var data = evt.data;
						me.datas.unshift(JSON.parse(data));
					};
					//	               ws.onclose = function() { 
					//	                  console.log("连接已关闭..."); 
					//	               };
				} else {
					console.log("您的浏览器不支持 WebSocket!");
				}

			},
			show: function() {
				this.img = !this.img
				this.img1 = !this.img1
				this.isCollapse = !this.isCollapse
				emitt.$emit("toggle", this.isCollapse)
			},
			//注销用户
			cancel() {
				this.$axios.post(api.cancel).then((res) => {
					if(res.data.isOK) {
						localStorage.clear();
						this.$router.push({
							path: '/'
						})
					} else {
						this.$message.error(res.data.msg);
					}
				});
			},
			guanbi() {
				this.isShow = false
			},
			fnSelect: function(event, index) {
				var me = this;
				var target = event.currentTarget;
				this.qwer = index;
				$('#title1').text(me.datas[index].Title)
				$('#con1').text(me.datas[index].Content)

			},
			fnMsg: function(index) {
				this.isShow = true;
				this.msgIndex = index;
				this.qwer = index;
				this.shows = false
				if(this.datas.length > 0) {
					$('#title1').text(this.datas[this.msgIndex].Title)
					$('#con1').text(this.datas[this.msgIndex].Content)
				} else {
					return;
				}

			},
			fnCancel: function() {
				this.isShow = false;
			},
			showsf() {
				$(".infolist").toggle()
			},
			//个人设置
			grsz() {
				this.form.username = localStorage.login
				this.headerImg = localStorage.HeadImg
				this.mark5 = true;
			},
			//确定修改
			updateuser() {
				this.$axios.post(api.profile, {
					"CNName": this.form.name,
					"Tel": this.form.tel,
					"HeadIMG": this.headerImg
				}).then((res) => {
					if(res.data.isOK) {
						this.mark5 = false;
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						localStorage.HeadImg = this.headerImg
						this.Imgurl = localStorage.HeadImg
					} else {
						this.$message.error(res.data.msg);
					}
				});
			},
			//修改密码
			mmcz() {
				if(this.form.pass == this.form.pwd && this.form.padd != null) {
					this.$axios.post(api.changepwd, {
						"Login": localStorage.login,
						"NewPwd": md5(this.form.pass),
						"OldPwd": md5(this.form.padd),
						"ValidOld": true
					}).then((res) => {
						if(res.data.isOK) {
							this.mark5 = false;
							this.$message({
								message: '修改成功',
								type: 'success'
							});
						} else {
							this.mark5 = false;
							this.$message.error(res.data.msg);
						}
					});
				} else {
					this.$message.error("两次密码输入不一样或密码为空");
					this.mark5 = true;
				}

			},
			quxia() {
				this.mark5 = false;
			}
		}
	};
</script>
<style scoped>
	.top-u {
		height: 60px;
		background-color: #df5412;
	}
	
	.logo {
		width: 200px;
		text-align: center;
		float: left;
		height: 60px;
		box-sizing: border-box;
		transition: all 0.3s;
		line-height: 60px;
		color: #fff;
	}
	
	.logo1 {
		width: 64px;
		text-align: center;
		float: left;
		height: 60px;
		/*padding-top: 8px;*/
		box-sizing: border-box;
		transition: all 0.3s;
		line-height: 60px;
		color: #fff;
	}
	.logo img {
		height: 60px;
		transition: all 0.3s;
	}
	.logo1 img {
		height: 60px;
		transition: all 0.3s;
	}
	.asidetop {
		height: 60px;
		float: left;
	}
	.btn {
		width: 28px;
		height: 28px;
		float: left;
		background-color: #df5412;
		color: #fff;
		font-size: 20px !important;
		margin-top: 16px !important;
	}
	.btn .iconfont {
		font-size: 30px !important;
	}
	.my-info {
		text-align: center;
		float: right;
		margin-right: 60px;
		margin-top: 7px;
		position: relative;
	}
	.el-dropdown {
		text-align: center;
	}
	.ivu-avatar {
		display: inline-block;
		text-align: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		width: 28px;
		height: 28px;
		line-height: 32px;
		border-radius: 16px;
	}
	.ivu-avatar img {
		width: 100%;
		display: block;
		font-size: 0;
	}
	.uasename {
		display: block;
		text-align: center;
		color: #fff;
	}
	.el-dropdown-menu {
		margin: 5px 0;
		border: 1px solid #d1dbe5;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
		padding: 0px 0;
		z-index: 10;
		position: absolute;
		top: 0;
		left: 0;
		min-width: 80px;
		font-size: 14px;
		text-align: center;
	}
	.tishi {
		position: absolute;
		top: -4px;
		right: 0px;
	}
	.tishi {
		color: #fff;
	}
	.infolist {
		position: absolute;
		top: 55px;
		padding-top: 0px;
		right: 0;
		list-style: none;
		display: none;
		border-top: 1px solid #e1e1e1;
		border-bottom: 1px solid #e1e1e1;
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		z-index: 999;
	}
	.infolist li {
		min-width: 220px;
		background: #fff;
		border-radius: 5px;
		color: #000000;
	}
	
	.clearfix:before,
	.clearfix:after {
		content: " ";
		display: table;
	}
	.clearfix:after {
		clear: both;
	}
	.pos {
		display: none;
		position: relative;
		width: 10px;
		height: 10px;
		line-height: 16px;
		text-align: center;
		border-radius: 50%;
		background: red;
	}
	.pull-left {
		float: left;
		margin-right: 10px;
		padding-top: 6px;
	}
	.pull-left em {
		color: #23b7e5;
		font-size: 28px;
	}
	.sweet-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 999999;
	}
	.list-group-item1 {
		position: relative;
		display: block;
		padding: 10px 0px;
		text-align: left;
		text-indent: 15px;
		margin-bottom: -1px;
		background-color: #fff;
		border: 1px solid #e4eaec;
		width: 100%;
		cursor: pointer;
		text-indent: 0px !important;
		padding-left: 10px !important;
	}
	.m0 {
		line-height: 18px;
	}
	.model {
		width: 600px;
		border-radius: 5px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
	}
	.center-block {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.panel {
		margin-bottom: 21px;
		background-color: #fff;
		border: 1px solid transparent;
		border-radius: 4px;
		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
		border-color: #cfdbe2;
		border-top-width: 3px;
	}
	.panel-default>.panel-heading {
		color: #444;
		background-color: #fff;
		border-color: #cfdbe2;
		font-size: 16px;
	}
	.panel-heading {
		padding: 10px 15px;
		border-bottom: 1px solid transparent;
		border-top-right-radius: 3px;
		border-top-left-radius: 3px;
	}
	.msgL {
		width: 25%;
		display: inline-block;
		min-height: 150px;
		max-height: 242px;
		overflow-y: auto;
		border: 1px solid #cfdbe2;
		border-top-width: 3px;
	}
	.msgR {
		width: 74%;
		float: right;
		display: inline-block;
		min-height: 150px;
		border: 1px solid #cfdbe2;
	}
	.panel-footer {
		padding: 10px 15px;
		background-color: #fafafa;
		border-top: 1px solid #eee;
		border-bottom-right-radius: 3px;
		border-bottom-left-radius: 3px;
	}
	.text-center {
		text-align: center;
	}
	.msgL {
		padding: 0 !important;
	}
	.msgL li.active {
		background: #5d9cec;
		color: #FFFFFF;
	}
	.msgL li {
		list-style: none;
		width: 100%;
		line-height: 40px;
		text-align: center;
		font-size: 16px;
	}
	.el-autocomplete,
	.el-dropdown {
		display: block !important;
	}
	.el-dropdown-link {
		display: block;
	}
</style>